<template>
  <div class="app-container">

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-add"
          size="mini"
          @click="addCostPage"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-add"
          size="mini"
          @click="updCostPage"
        >修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-add"
          size="mini"
          @click="delCost"
        >删除
        </el-button>
      </el-col>
    </el-row>
    <!-- 账单列表"-->
    <el-table
      v-loading="listLoading"
      :data="list"
      border
      height="600px"
      @selection-change="handleSelectionChange"
      style="width: 100%;margin-top: 10px;"
    >
      <el-table-column type="selection" width="40"></el-table-column>
      <el-table-column
        label="序号"
        width="70"
        align="center"
      >
        <template v-slot="scope">
          {{ (pageNum - 1) * pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column label="账单编号" prop="billNo"/>
      <el-table-column label="公司名称" width="180px" prop="compName"/>
      <el-table-column label="客户名称" prop="clientName"/>
      <el-table-column label="状态" prop="ruleState">
<!--        <template slot-scope="scope">-->
        <template v-slot='scope'>
          <span v-if="scope.row.ruleState === '01'">未提交</span>
          <span v-if="scope.row.ruleState === '02'">审批中</span>
          <span v-if="scope.row.ruleState === '03'">已生效</span>
          <span v-if="scope.row.ruleState === '04'">已到期</span>
          <span v-if="scope.row.ruleState === '05'">已打回</span>
        </template>
      </el-table-column>
      <el-table-column label="当前审批" prop="auditName"/>
      <el-table-column label="说明" prop="explains"/>
      <el-table-column label="开始时间" width="160px" prop="validStartDate"/>
      <el-table-column label="结束时间" width="160px" prop="validEndDate"/>
    </el-table>

    <el-pagination
      :current-page="pageNum"
      :total="total"
      :page-size="pageSize"
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="fetchData"
    />

    <el-dialog
      :title="pageTitle"
      :visible.sync="addVisible"
      width="40%"
    >
      <el-form ref="dataForm" :rules="rules" :model="quoteRules" label-width="100px" size="small">
        <el-form-item label="公司名称:" prop="compId">
          <el-select ref="selCom" v-model="quoteRules.compId" filterable placeholder="请选择公司" style="width: 80%">
            <el-option
              v-for="item in compList"
              :key="item.compId"
              :label="item.compName"
              :value="item.compId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户名称:" prop="clientId">
          <el-select ref="selCli" v-model="quoteRules.clientId" placeholder="请选择客户" style="width: 80%">
            <el-option label="长沙中行" value="111111"></el-option>
            <el-option label="衡阳瓷砖" value="222222"></el-option>
            <el-option label="永州人保" value="333333"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="执行日期:" required>
          <el-form-item prop="validDate">
            <el-date-picker
              v-model="quoteRules.validDate"
              type="datetimerange"
              align="right"
              placeholder="选择日期"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '23:59:59']"
            >
            </el-date-picker>
          </el-form-item>
        </el-form-item>
        <el-form-item label="说明:" prop="explains">
          <el-input type="textarea" v-model="quoteRules.explains" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item align="center">
          <el-button type="primary" @click="addCost">保存</el-button>
          <el-button type="primary" @click="resetForm('ruleForm')">返回</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>
<script>

import api from '@/api/costRule/cost'
import appApi from '@/api/tool/approval'

export default {
  data() {
    return {
      listLoading: false, // 数据是否正在加载
      list: null, // 列表
      total: 0, // 数据库中的总记录数
      pageNum: 1, // 默认页码
      pageSize: 10, // 每页记录数
      searchObj: {}, // 查询表单对象

      ids: [],
      addVisible: false,
      quoteRules: {},

      compList: [],
      approvalList: null,
      dialogVisible: false,

      pageTitle: '新增规则',

      rules: {
        compId: [
          { required: true, message: '请选择公司', trigger: 'change' }
        ],
        clientId: [
          { required: true, message: '请选择客户', trigger: 'change' }
        ],
        validDate: [
          { required: true, message: '请选择时间', trigger: 'change' }
        ],
        explains: [
          { required: true, message: '请填说明', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    // 调用列表方法
    this.fetchData()
  },
  methods: {
    resetForm(formName) {
      this.addVisible = false
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item)
    },
    fetchData(pageNum = 1) {
      this.pageNum = pageNum
      api.getPageList(this.pageNum, this.pageSize).then(res => {
        this.list = res.data.records
        this.total = res.data.total
      })
      appApi.getCompList().then(res => {
        if (res.code === 200) {
          this.compList = res.data
        } else {
          this.$message.error('查询公司失败!')
        }
      })
    },
    addCostPage() {
      this.addVisible = true
      this.quoteRules = {}
    },
    delCost() {
      if (this.ids.length === 0) {
        this.$message.error('请选择数据在删除!')
        return
      }
      for (let i = 0; i < this.ids.length; i++) {
        const state = this.ids[i].ruleState
        if (state !== '01' && state !== '05') {
          this.$message.error('只能删除已打回和未提交数据!')
          return
        }
      }
      api.delCost(this.ids).then(res => {
        if (res.code === 200) {
          this.$message.success('删除成功!')
          this.fetchData()
        }
      })
    },
    updCostPage() {
      if (this.ids.length !== 1) {
        this.$message.error('请选择一条数据修改!')
        return
      }
      for (let i = 0; i < this.ids.length; i++) {
        const state = this.ids[i].ruleState
        if (state !== '01' && state !== '05') {
          this.$message.error('只能修改已打回和未提交数据!')
          return
        }
      }
      this.pageTitle = '修改规则'
      this.addVisible = true
      const id = this.ids[0].ruleId
      api.getCost(id).then(res => {
        if (res.code === 200) {
          this.quoteRules = res.data
          if (res.data.validStartDate && res.data.validEndDate) {
            this.$set(this.quoteRules, 'validDate', [res.data.validStartDate, res.data.validEndDate])
          }
        }
      })
    },
    addCost() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.quoteRules.compName = this.$refs.selCom.selectedLabel
          this.quoteRules.clientName = this.$refs.selCli.selectedLabel
          this.quoteRules.validStartDate = this.quoteRules.validDate[0]
          this.quoteRules.validEndDate = this.quoteRules.validDate[1]
          api.addCost(this.quoteRules).then(res => {
            const msg = this.quoteRules.ruleId ? '修改成功!' : '新增成功!'
            if (res.code === 200) {
              this.$message.success(msg)
              this.addVisible = false
              this.fetchData()
            } else {
              this.$message.error(msg)
            }
          })
        } else {
          console.log('校验未通过!')
          return false
        }
      })
    },
    submit() {
      if (this.ids.length === 0) {
        this.$message.error('请选择数据操作!')
        return
      }
      for (let i = 0; i < this.ids.length; i++) {
        const state = this.ids[i].ruleState
        if (state !== '01' && state !== '05') {
          this.$message.error('只能提交已打回和未提交数据!')
          return
        }
      }
      api.submitApprove(this.ids).then(res => {
        if (res.code === 200) {
          this.$message.success('提交成功!')
        } else {
          this.$message.error('提交失败!')
        }
        this.fetchData()
      })
    },
    findApproval() {
      if (this.ids.length !== 1) {
        this.$message.error('请选择一条数据!')
        return
      }

      api.findApproval(this.ids[0].ruleId).then(res => {
        if (res.code === 200) {
          this.dialogVisible = true
          this.approvalList = res.data
        } else {
          this.$message.error('查询失败!')
        }
      })
    }

  }
}
</script>
